<template>
  <div class="container">
      <div class="img-wrapper">
        <img :src="imgSrc">
      </div>
      <div class="operation-wrapper">
              <div v-for="item in operationList"
                   class="operation-item-wrapper"
                   :class="activeType === item.type ? 'active':''"
                   :key="item.type"
                   @click="handleClick(item)"
              >
                {{item.type}}
              </div>
      </div>
  </div>
  <el-button @click="req">获取</el-button>
</template>

<script setup>
import {onMounted, ref} from "vue";

const folder_path = '/Users/ljun/Desktop/test.dicom'

    const operationList = ref([
      {
        type:'window'
      },
      {
        type:'pan'
      },
      {
        type:'scale'
      },
      {
        type:'reset'
      },
    ])

    const activeType = ref('window')

    const handleClick = item => {
      activeType.value = item.type
    }
    const imgSrc = ref('')

    onMounted(() => {
      const ws = new WebSocket('ws://192.168.1.122:16665')
      ws.onopen = () => {
        console.log('connect')
      }
      ws.onmessage = e => {
        const obj = JSON.parse(e.data)
        imgSrc.value = `data:image/png;base64,`+ obj.img
      }
    })

  const req = function () {
    fetch('http://192.168.1.122:16666',{
      method:'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        path: folder_path
      })
    })
        .then(response => response.json())
        .then(data => {
          console.log(data)
          //imgSrc.value =`data:image/png;base64,`+ data.img
        })
        .catch((error) => {
          console.error('Error:', error);
        });
  }


</script>

<style>
  html,body{
    width: 100%;
    height: 100%;
  }
  .container{
    width: 900px;
    height: 600px;
    display: flex;
    border: 1px solid black;
  }
  .img-wrapper{
    flex: 1;
  }
  .operation-wrapper{
    width: 80px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid black;
  }
  .operation-item-wrapper{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid black;
  }
  .active{
    background-color: green;
  }
</style>
